// 费用结算管理
//    
<template>
  <div class="costSettlementManage">
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="费用类型：">
        <el-select v-model="formInline.expenseType" placeholder="全部">
          <el-option label="全部" value="-1"></el-option>
          <el-option label="管理费用" value="0"></el-option>
          <el-option label="运营费用" value="1"></el-option>
          <el-option label="财务费用" value="2"></el-option>
          <el-option label="税金" value="3"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="科目名称：">
        <el-select v-model="formInline.subject" placeholder="全部">
          <el-option label="全部" value="-1"></el-option>
          <el-option label="人工成本" value="0"></el-option>
          <el-option label="公司类费用" value="1"></el-option>
          <el-option label="研发费用" value="2"></el-option>
          <el-option label="运营费用" value="3"></el-option>
          <el-option label="推广费用" value="4"></el-option>
          <el-option label="手续费用" value="5"></el-option>
          <el-option label="金融费用" value="6"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="统计周期：">
        <el-select v-model="formInline.cycle" placeholder="全部">
          <el-option label="全部" value="-1"></el-option>
          <el-option label="月度" value="0"></el-option>
          <el-option label="季度" value="1"></el-option>
          <el-option label="半年" value="2"></el-option>
          <el-option label="整年" value="3"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="计算方式：">
        <el-select v-model="formInline.computingMethod" placeholder="全部">
          <el-option label="全部" value="-1"></el-option>
          <el-option label="当期" value="0"></el-option>
          <el-option label="累计" value="1"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit" id="monitorEnter">查询</el-button>
      </el-form-item>
    </el-form>
    
    <template>
      <el-table
        :data="tableData"
        style="width: 100%;margin-bottom: 20px;"
        :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
        row-key="detailIdStr"
        border>
        <el-table-column
          fixed
          align="center"
          prop="xh"
          label="序号"
          width="100">
        </el-table-column>
        <el-table-column
          prop="expenseType"
          label="费用类型"
          align="center"
          width="110">
          <template slot-scope="scope">
            <span v-show="scope.row.expenseType == 0">管理费用</span>
            <span v-show="scope.row.expenseType == 1">运营费用</span>
            <span v-show="scope.row.expenseType == 2">财务费用</span>
            <span v-show="scope.row.expenseType == 3">税金</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="subject"
          label="科目名称"
          align="center"
          width="110">
          <template slot-scope="scope">
            <span v-show="scope.row.subject == 0">人工成本</span>
            <span v-show="scope.row.subject == 1">公司类费用</span>
            <span v-show="scope.row.subject == 2">研发费用</span>
            <span v-show="scope.row.subject == 3">运营费用</span>
            <span v-show="scope.row.subject == 4">推广费用</span>
            <span v-show="scope.row.subject == 5">手续费用</span>
            <span v-show="scope.row.subject == 6">金融类</span>
            <span v-show="scope.row.subject == 7">税费</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="cycle"
          label="统计周期"
          align="center"
          width="110">
          <template slot-scope="scope">
            <span v-show="scope.row.cycle == 0">月度</span>
            <span v-show="scope.row.cycle == 1">季度</span>
            <span v-show="scope.row.cycle == 2">半年</span>
            <span v-show="scope.row.cycle == 3">整年</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="computingMethod"
          width="110"
          align="center"
          label="计算方式">
          <template slot-scope="scope">
            <span v-show="scope.row.computingMethod == 0">当期</span>
            <span v-show="scope.row.computingMethod == 1">累计</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="yearCode"
          width="160"
          align="center"
          expand-row-keys
          label="年度">
          <template slot-scope="scope">
            <i :style="!scope.row.children ? 'margin-left:50px':''" :class="!scope.row.children ? 'circle':''"></i>
            <span>{{scope.row.yearCode}}<span :style="scope.row.children ? 'margin-left:5px':''" v-show="scope.row.children"></span></span>
          </template>
        </el-table-column>
        <el-table-column
          prop="calculatingBase"
          width="150"
          align="center"
          label="计算基数">
          <template slot-scope="scope">
            {{scope.row.calculatingBase == 0 || scope.row.calculatingBase ? scope.row.calculatingBase : '--' | numFormat}}
          </template>
        </el-table-column>
        <el-table-column
          prop="calculationProportion"
          width="110"
          align="center"
          label="计算比列">
          <template slot-scope="scope">
            {{scope.row.calculationProportion}}%
          </template>
        </el-table-column>
        <el-table-column
          prop="settlementExpense"
          width="150"
          align="center"
          label="结算费用（元）">
          <template slot-scope="scope">
            {{scope.row.settlementExpense == 0 || scope.row.settlementExpense ? scope.row.settlementExpense : '--' | numFormat}}
          </template>
        </el-table-column>
        <el-table-column
          fixed="right"
          align="center"
          label="操作">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row,1)" type="text" size="small" v-if="!scope.row.children" :disabled='scope.row.controlStatus == 1 && scope.row.flag == 0 && scope.row.status==1 ? false:true'>{{scope.row.controlStatus == 1 && scope.row.flag == 0 && scope.row.status==1 ? '重新生成':'--'}}</el-button>
            <el-button @click="handleClick(scope.row,2)" type="text" size="small" v-if="!scope.row.children" :disabled='scope.row.controlStatus == 1 && scope.row.flag == 0 && scope.row.status==1 ? false:true'>{{scope.row.controlStatus == 1 && scope.row.flag == 0 && scope.row.status==1 ? '锁定':'--'}}</el-button>
            <el-button @click="handleClick(scope.row,3)" type="text" size="small" v-if="!scope.row.children" :disabled='scope.row.controlStatus == 1 && scope.row.flag == 0 && scope.row.status==0 ? false:true'>{{scope.row.controlStatus == 1 && scope.row.flag == 0 && scope.row.status==0 ? '解锁':'--'}}</el-button>
            <el-button  @click="handleClick(scope.row,4)" type="text" size="small" v-else :disabled="scope.row.yearFlag == 1? false:true">{{scope.row.yearFlag == 1 ?'重新生成':'--'}}</el-button>
          </template>
        </el-table-column>
      </el-table>
    </template>
    <div class="block">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="pageData.pageNum"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="pageData.pageSize"
        layout="total, sizes, prev, pager, next"
        :total="totalSize">
      </el-pagination>
    </div>
    <div>
      <el-dialog
        title=""
        :visible.sync="centerDialogVisible"
        width="30%"
        center>
        <span>{{dialogTxt}}</span>
        <span slot="footer" class="dialog-footer">
          <el-button @click="handleCancle">取 消</el-button>
          <el-button type="primary" @click="handleConfirm">确定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import api from '@/api/apiPath'
export default {
  name:'costSettlementManage',
  title:'费用结算管理',
  data(){
    return {
      centerDialogVisible: false,
      dialogTxt:'',
      totalSize:0,
      pageData:{
        pageSize:10,
        pageNum:1
      },
      formInline: {
        expenseType:'',
        subject:'',
        cycle:'',
        computingMethod:''
      },
      tableData: [],
      row:null,
      val:null
    }
  },
  created(){
    this.onSubmit()
  },
  activated(){
    this.onSubmit()
  },
  filters:{
    numFormat(val ){
      if(!isNaN(val)){
        val += '';  
        let x = val.split('.');  
        let x1 = x[0];  
        let x2 = x.length > 1 ? '.' + x[1] : '';  
        var rgx = /(\d+)(\d{3})/;  
        while (rgx.test(x1)) {  
        x1 = x1.replace(rgx, '$1' + ',' + '$2');  
        }  
        return x1 + x2; 
      }else{
        return '--'
      }
    }
  },
  methods:{
    // 费用管理-查询列表
    onSubmit() {
      this.axios.post(api.costSettlementManage,{
        expenseType:this.formInline.expenseType,
        subject:this.formInline.subject,
        cycle:this.formInline.cycle,
        computingMethod:this.formInline.computingMethod,
        pageNum:this.pageData.pageNum,
        pageSize:this.pageData.pageSize
      }).then((res)=>{
        console.log(res.data.data)
        this.totalSize = res.data.data.total
        this.tableData = res.data.data.list
        this.tableData.forEach((item,index)=>{
          item.yearCode = item.yearCode + '年'
          item.xh = index+1
          item.children.forEach((every,idx) =>{
            every.xh = 1+index + '.' + (+idx + 1)
            every.yearCode = every.yearCode
          })
        })
      }).catch((err)=>{
        console.log(err)
      })
    },
    handleSizeChange(val) {
      console.log(val)
      this.pageData.pageSize = val
      this.onSubmit()
    },
    handleCurrentChange(val) {
      this.onSubmit()
    },
    // 重新生成
    handleGenerate(row){
      let params = {}
      console.log(row)
      if(row.yearFlag == 1){
        params.settlementId = row.id
      }else{
        params.detailId = row.id
      }
      console.log(params)
      this.axios.post(api.newcreate,params).then((res)=>{
        if(res.data.code){
          // this.centerDialogVisible = false
          this.$message('已重新生成')
          this.onSubmit()
        }
      }).catch((err)=>{
        console.log(err)
      })
    },
    // 锁定
    handleLock(row){
      this.axios.get(api.close + '/' + row.id).then((res)=>{
        if(res.data.code == 200){
          // this.centerDialogVisible = false
          this.$message('锁定成功')
          this.onSubmit()
        }
      }).catch((err)=>{
        console.log(err)
      })
    },
    // 解锁
    handleNolock(row){
      this.axios.get(api.open + '/' + row.id).then((res)=>{
        if(res.data.code){
          // this.centerDialogVisible = false
          this.$message('解锁成功')
          this.onSubmit()
        }
      }).catch((err)=>{
        console.log(err)
      })
    },
    handleClick(row,val){
      this.centerDialogVisible = true
      this.row = row
      this.val = val
      if(val == 1 || val == 4){
        this.dialogTxt = '确定重新生成该周期内的数据吗？'
      }else if(val == 2){
        this.dialogTxt = '锁定期间内该数据不支持重新生成，确认锁定吗？'
      }else if(val == 3){
        this.dialogTxt = '解锁后可以重新生成数据，确认解锁该吗？'
      }
    },
    // 取消
    handleCancle(){
      this.centerDialogVisible = false
    },
    // 确定
    handleConfirm(){
      this.centerDialogVisible = false
      if(this.val == 1 || this.val == 4){
        this.handleGenerate(this.row)
      }else if(this.val == 2){
        this.handleLock(this.row)
      }else if(this.val == 3){
        this.handleNolock(this.row)
      }
    }
  }
}
</script>

<style lang='stylus'>
.costSettlementManage{
  .el-input{
    width:200px;
  }
  .circle{
    display:inline-block;
    margin-bottom:3px;
    width:4px;
    height:4px;
    border-radius:50%;
    border:1px solid #595959;
    vertical-align:middle;
  }
  .top-triangle{
    display: inline-block;
    width: 0;
    height: 0;
    border-left: 4px solid #797979;
    border-top: 4px solid #797979;
    border-right: 4px solid transparent;
    border-bottom: 4px solid transparent;
    transform: rotate(45deg);
    margin: 0px 2px -1px 2px;
  }
  .bottom-triangle{
    display: inline-block;
    width: 0;
    height: 0;
    border-left: 4px solid #404040;
    border-top: 4px solid #404040;
    border-right: 4px solid transparent;
    border-bottom: 4px solid transparent;
    transform: rotate(-135deg);
    margin: 0px 2px -1px 2px;
  }
  .btn{
    position :relative;
  }
  .btn::before{
    content:'';
    position:absolute;
    top:-10px;
    rigth:-10px;
    bottom:-10px;
    left:-10px;
  }
}
</style>
